<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title>无缝滚动</title>
	<style type="text/css">
		*{
			margin: 0;padding: 0;
		}
		#main{
			width: 800px;height: 200px;margin: 50px auto;
			border: 1px solid #666;
			position: relative;
			overflow: hidden;
		}
		#main ul{
			width: 800px;position: absolute;left: 0;top: 0;
		}
		#main li{
			list-style: none;float: left;
		}
		#btn{
			width: 140px;
			height: 30px;
			margin:50px auto;
			line-height:30px;
		}
		#btn a{
			margin-left: 10px;
			padding: 0px 10px;
			border: 1px solid #666;
			border-radius:10px;
			text-decoration: none;
		}
	</style>
</head>
<body>

	<div id="btn">
		<a href="javascript:goLeft();">向左</a>
		<a href="javascript:goRight();">向右</a>
	</div>
	<div id="main">
		<ul>
			<li><img src="images/1.jpg"></li>
			<li><img src="images/2.jpg"></li>
			<li><img src="images/3.jpg"></li>
			<li><img src="images/4.jpg"></li>
			
		</ul>
	</div>
<script type="text/javascript">
var main = document.getElementById('main');
var oUl = main.getElementsByTagName('ul')[0];
//让ul的内容复制一份
oUl.innerHTML += oUl.innerHTML;
// 让ul的宽度扩展一倍
oUl.style.width = oUl.offsetWidth*2+'px';
// 每隔30毫秒向左移动
// var timer = setInterval(function () {
// 	// 让ul整体向左移动
// 	oUl.style.left = oUl.offsetLeft-5+'px';
// 	if (oUl.offsetLeft<= -800) {
// 		oUl.style.left = 0;
// 	}
// },30);
// 
var speed = 5;
function goLeft() {
	speed = -5;
}
function goRight() {
	speed = 5;
}
var changePic = function () {
	oUl.style.left = oUl.offsetLeft+speed+'px';
	if (oUl.offsetLeft >= 0) {
		oUl.style.left = '-800px';
	}else if (oUl.offsetLeft<= -800) {
		oUl.style.left = 0;
	}
}
var timer = setInterval(changePic,30);
main.onmouseover = function () {
	clearInterval(timer);
}
main.onmouseout = function () {
	timer = setInterval(changePic,30);
}
</script>
</body>
</html>